<template>
	<div class="integral" v-if="data">
		<header class="header pos-fix full-width">
			<!-- <router-link tag="p" to="/login/protocol?id=point" class="align-right fs12 white pr15 pt10"><van-icon name="guize" class="mr5 fs12"/>积分规则</router-link> -->
			<div class="align-center mt10">
				<h3 class="fs14 white">我的积分</h3>
				<p class="white" style="font-size:43px">{{ data.point }}</p>
				<router-link tag="button" :to="'/h5/conversion?token='+ token" class="fs12 white border radius pt5 pb5 pl10 pr10" style="border-color:#fff">积分兑换</router-link>
			</div>
		</header>
		<section class="integral-content" v-if="data.list">
			<h3 class='fs14 pt15 pb15 w92 auto' style="color:#585293">积分明细</h3>
			<ul class="list-month" v-if="data.list.length">
				<li v-for="items in data.list">
					<h5 class="fs14 c81 bg-f5 pt5 pb5 pl15 pr15 ">{{ items.month }}</h5>
					<ul class="list">
						<li class="layout border-b pl15 pr15 pt15 pb15" v-for="item in items.data">
							<div class="">
								<strong class="fs14 c333 mb5 ">{{ item.con }}</strong>
								<p class="fs12 c81">{{ item.created_at }}</p>
							</div>
							<span class="fs14 black"><i v-if="item.sign == 1">+</i><i v-else>-</i>100</span>
						</li>
					</ul>
				</li>
			</ul>
			<p v-else class="align-center" style="margin: 20% 0;">暂无积分明细~</p>
		</section>
	</div>
</template>

<script>
	export default{
		data()
		{
			return{
				data : [],
				token : this.$route.query.token
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/userpoint/list',{
					headers:{
						Authorization : this.$route.query.token
					}
				}).then(res=>{
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.integral{
		.header{
			height: 170px;
			background-image: url(../../assets/banner-bg.jpg);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
			top: 0;
			z-index: 99;
		}
		.integral-content{
			margin-top:170px;
			.list-month{
				overflow-x: scroll;
				.list{
					li{
						&:last-child{
							border:none;
						}
					}
				}
			}
		}
	}
</style>
